<template>
  <!--  消费-个人消费统计 -->
  <div class="personal_consumption_smmary">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <myTime @handleGetTime="handleGetTime"></myTime>
      <el-form-item label="姓名:" id="elfrom1">
        <el-input v-model="userName" placeholder="姓名" size="mini" clearable style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="部门:">
        <el-select v-model="departmentGuid" placeholder="请选择" size="mini" clearable multiple>
          <el-option
            v-for="item in departmentoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="餐别分类显示:">
        <el-checkbox v-model="mealFlag"></el-checkbox>
      </el-form-item>
      <el-form-item label="消费点分类显示:">
        <el-checkbox v-model="placeFlag"></el-checkbox>
      </el-form-item>
      <el-form-item class="searchmarigin">
        <el-button
          type="primary"
          @click="onSubmit"
          size="mini"
          icon="el-icon-search"
          v-if="activeName == 'first' ? true : false"
        >查询</el-button>
        <el-button
          type="primary"
          @click="DetailsonSubmit"
          size="mini"
          icon="el-icon-search"
          v-if="activeName == 'second' ? true : false"
        >查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onExport"
          size="mini"
          icon="el-icon-document-copy"
          v-if="activeName == 'first' ? true : false"
        >导出</el-button>
        <el-button
          type="primary"
          @click="DetailsonExport"
          size="mini"
          icon="el-icon-document-copy"
          v-if="activeName == 'second' ? true : false"
        >导出</el-button>
        <el-button
          type="primary"
          @click="onExport('print')"
          size="mini"
          icon="el-icon-printer"
          v-if="activeName == 'first' ? true : false"
        >打印</el-button>
        <el-button
          type="primary"
          @click="DetailsonExport('print')"
          size="mini"
          icon="el-icon-printer"
          v-if="activeName == 'second' ? true : false"
        >打印</el-button>
      </el-form-item>
      <el-form-item v-if="activeName == 'first' ? true : false">
        <el-popover width="650" placement="top" trigger="click">
          <el-row>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.departmentName.label"
              v-model="formThead.departmentName.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.cardNumber.label"
              v-model="formThead.cardNumber.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.userName.label"
              v-model="formThead.userName.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.consumePlace.label"
              v-model="formThead.consumePlace.checked"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.mealName.label"
              v-model="formThead.mealName.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.sumSuccessExpenditure.label"
              v-model="formThead.sumSuccessExpenditure.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.sumExpenditure.label"
              v-model="formThead.sumExpenditure.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.consumeCount.label"
              v-model="formThead.consumeCount.checked"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.avgExpenditure.label"
              v-model="formThead.avgExpenditure.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.maxExpenditure.label"
              v-model="formThead.maxExpenditure.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.minExpenditure.label"
              v-model="formThead.minExpenditure.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 15%"
              @change="checkboxChanged()"
              :label="formThead.timesExpenditureCount.label"
              v-model="formThead.timesExpenditureCount.checked"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width: 20%"
              @change="checkboxChanged()"
              :label="formThead.sumLoseExpenditure.label"
              v-model="formThead.sumLoseExpenditure.checked"
            ></el-checkbox>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item v-if="activeName == 'second' ? true : false">
        <el-popover width="500" placement="top" trigger="click">
          <el-row>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.cardNumber.label"
              v-model="formThead2.cardNumber.checked"
              margin-right:10px
            ></el-checkbox>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.departmentName.label"
              v-model="formThead2.departmentName.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.userName.label"
              v-model="formThead2.userName.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.dataMakeTime.label"
              v-model="formThead2.dataMakeTime.checked"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.expenditure.label"
              v-model="formThead2.expenditure.checked"
              margin-right:10px
            ></el-checkbox>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.newBalance.label"
              v-model="formThead2.newBalance.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.chargingType.label"
              v-model="formThead2.chargingType.checked"
            ></el-checkbox>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.consumePlace.label"
              v-model="formThead2.consumePlace.checked"
            ></el-checkbox>
          </el-row>
          <el-row>
            <el-checkbox
              style="width: 10%"
              @change="checkboxChanged2()"
              :label="formThead2.terminalCode.label"
              v-model="formThead2.terminalCode.checked"
            ></el-checkbox>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <div class="tabs_main">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="个人消费汇总" name="first">
          <div v-if="Flagcheck">
            <el-table
              id="conspumptiontableone"
              v-loading="loading1"
              ref="table"
              :data="personalconsumption"
              border
              lazy
              highlight-current-row
              row-key="id"
              v-if="Flagcheck"
              :tree-props="Flagtype"
              :header-cell-style="headFirst"
              :cell-style="
                mealFlag
                  ? () => {}
                  : (res) => headFirst_col(res, personalconsumption)
              "
              style="width: 100%"
            >
              <el-table-column
                prop="departmentName"
                label="部门名称"
                min-width="100px"
                v-if="formThead.departmentName.checked"
              ></el-table-column>
              <el-table-column
                prop="cardNumber"
                label="卡号"
                min-width="100px"
                v-if="formThead.cardNumber.checked"
              ></el-table-column>
              <el-table-column prop="userName" label="姓名" v-if="formThead.userName.checked"></el-table-column>
              <el-table-column
                prop="consumePlace"
                label="消费地点"
                v-if="formThead.consumePlace.checked"
              ></el-table-column>
              <el-table-column prop="mealName" label="餐别" v-if="formThead.mealName.checked"></el-table-column>
              <el-table-column
                prop="sumSuccessExpenditure"
                width="90px"
                label="储值消费(元)"
                v-if="formThead.sumSuccessExpenditure.checked"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.sumSuccessExpenditure | amountyuan }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="sumLoseExpenditure"
                label="未处理非确定消费金额(元)"
                v-if="formThead.sumLoseExpenditure.checked"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.sumLoseExpenditure | amountyuan }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="sumExpenditure"
                label="合计(元)"
                v-if="formThead.sumExpenditure.checked"
                min-width="90px"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.sumExpenditure | amountyuan }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="consumeCount"
                label="消费次数"
                v-if="formThead.consumeCount.checked"
              ></el-table-column>
              <el-table-column
                prop="avgExpenditure"
                width="90px"
                label="平均消费(元)"
                v-if="formThead.avgExpenditure.checked"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.avgExpenditure | amountyuan }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="maxExpenditure"
                width="110px"
                label="最大消费金额(元)"
                v-if="formThead.maxExpenditure.checked"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.maxExpenditure | amountyuan }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="minExpenditure"
                width="110px"
                label="最小消费金额(元)"
                v-if="formThead.minExpenditure.checked"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.minExpenditure | amountyuan }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="timesExpenditureCount"
                label="计次消费次数"
                v-if="formThead.timesExpenditureCount.checked"
                width="90px"
              ></el-table-column>
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChangepage"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordCount"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="个人消费明细" name="second">
          <el-table
            v-loading="loading2"
            :data="detailslist"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="headFirst"
            :cell-style="
              detailsTotal ? (res) => headFirst_col(res, detailslist) : () => {}
            "
            ref="detailslist"
          >
            <el-table-column
              prop="cardNumber"
              label="卡号"
              v-if="formThead2.cardNumber.checked"
              min-width="110px"
            ></el-table-column>
            <el-table-column prop="userName" label="姓名" v-cloak v-if="formThead2.userName.checked"></el-table-column>
            <el-table-column
              prop="departmentName"
              label="部门名称"
              v-cloak
              v-if="formThead2.departmentName.checked"
              min-width="110px"
            ></el-table-column>
            <el-table-column
              prop="dataMakeTime"
              label="消费时间"
              v-cloak
              v-if="formThead2.dataMakeTime.checked"
              min-width="156px"
            ></el-table-column>
            <el-table-column
              prop="expenditure"
              label="操作金额(元)"
              v-cloak
              v-if="formThead2.expenditure.checked"
              min-width="100px"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.expenditure | amountyuan }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="newBalance"
              label="卡内余额(元)"
              v-cloak
              v-if="formThead2.newBalance.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.newBalance | amountyuan }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="chargingType"
              label="交易类型"
              v-cloak
              v-if="formThead2.chargingType.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.chargingType | filterchargingType }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="consumePlace"
              label="消费地点"
              v-cloak
              v-if="formThead2.consumePlace.checked"
              min-width="140px"
            ></el-table-column>
            <el-table-column
              prop="terminalCode"
              label="设备编号"
              v-cloak
              v-if="formThead2.terminalCode.checked"
            ></el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChangepage2"
              :current-page="currentPage2"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordCount2"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      elform: {},
      departmentGuid: [],
      userName: '',
      departmentoptions: [],
      daytime: '',
      time: '',
      Flagcheck: true,
      Flagtype: {},
      mealFlag: false,
      placeFlag: false,
      //个人消费汇总
      pageSize: 20,
      pageNum: 1,
      currentPage: 1,
      recordCount: 0,
      searchInfo: {},
      activeName: 'first',
      //个人消费汇总统计
      totalist: {},
      exporttotal: {},

      formThead: {
        departmentName: {
          label: '部门名称',
          prop: 'departmentName',
          checked: true
        },
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        userName: { label: '姓名', prop: 'userName', checked: true },
        consumePlace: {
          label: '消费地点',
          prop: 'consumePlace',
          checked: true
        },
        mealName: { label: '餐别', prop: 'mealName', checked: true },
        sumSuccessExpenditure: {
          label: '储值消费(元)',
          prop: 'sumSuccessExpenditure',
          checked: true
        },
        sumLoseExpenditure: {
          label: '未处理非确定消费金额(元)',
          prop: 'sumLoseExpenditure',
          checked: true
        },
        sumExpenditure: {
          label: '合计(元)',
          prop: 'sumExpenditure',
          checked: true
        },
        consumeCount: {
          label: '消费次数',
          prop: 'consumeCount',
          checked: true
        },
        avgExpenditure: {
          label: '平均消费(元)',
          prop: 'avgExpenditure',
          checked: true
        },
        maxExpenditure: {
          label: '最大消费金额(元)',
          prop: 'maxExpenditure',
          checked: true
        },
        minExpenditure: {
          label: '最小消费金额(元)',
          prop: 'minExpenditure',
          checked: true
        },
        timesExpenditureCount: {
          label: '计次消费次数',
          prop: 'timesExpenditureCount',
          checked: true
        }
      },
      personalconsumption: [],
      exportlist: [],
      filename: '个人消费汇总',
      //消费明细表
      detailsTotal: null,
      detailslist: [],
      pageSize2: 20,
      pageNum2: 1,
      currentPage2: 1,
      recordCount2: 0,
      detailslistExportlist: [],
      formThead2: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        departmentName: {
          label: '部门名称',
          prop: 'departmentName',
          checked: true
        },
        userName: { label: '姓名', prop: 'userName', checked: true },
        dataMakeTime: {
          label: '消费时间',
          prop: 'dataMakeTime',
          checked: true
        },
        expenditure: {
          label: '操作金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: {
          label: '卡内余额(元)',
          prop: 'newBalance',
          checked: true
        },
        chargingType: {
          label: '交易类型',
          prop: 'chargingType',
          checked: true
        },
        consumePlace: {
          label: '消费地点',
          prop: 'consumePlace',
          checked: true
        },
        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: true
        }
      },
      filename2: '个人消费明细表'
    }
  },
  created() {
    this.daytime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
  },
  mounted() {
    this.departmentselectlist()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    handleGetTime(val) {
      this.daytime = [val.startDate, val.endDate]
      this.time = [val.startTime, val.endTime]
      this.radio = val.timeradio
    },
    //部门选择
    departmentselectlist() {
      this.departmentoptions = []
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            }
            this.departmentoptions.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    /**
     * 个人消费汇总模块
     */
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
    },
    //个人消费汇总
    usergather() {
      this.loading1 = true
      this.searchInfo.unitGuid = this.changeschoolid
      this.personalconsumption = []
      this.$http({
        url: this.$http.adornUrl('/terminal/consume/consume-data-user-gather'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading1 = false
        if (data.messageCode == 200) {
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum

          this.personalconsumption = data.messageContent.data
          if (data.messageContent.data.length != 0) {
            if (this.mealFlag == false && this.placeFlag == false) {
              this.personalconsumption.push(this.totalist)
              return
            }

            if (this.mealFlag == true && this.placeFlag == true) {
              this.totalist.id = 'all'
              // this.totalist.departmentName='汇总'
              this.totalist.placeList = this.totalist.placeList || []
              for (var k = 0; k < this.totalist.placeList.length; k++) {
                this.totalist.placeList[k].id = 'all' + k
              }
              for (var i = 0; i < this.personalconsumption.length; i++) {
                this.personalconsumption[i].id = 'ab1' + [i].toString()
                if (
                  this.personalconsumption[i].placeList != null &&
                  this.personalconsumption[i].placeList.length != 0
                ) {
                  for (
                    var j = 0;
                    j < this.personalconsumption[i].placeList.length;
                    j++
                  ) {
                    this.personalconsumption[i].placeList[j].id =
                      'ac2' + i.toString() + j.toString()
                    //  this.personalconsumption[i].placeList[j].mealName='全部'
                    for (
                      var z = 0;
                      z <
                      this.personalconsumption[i].placeList[j].mealPlaceList
                        .length;
                      z++
                    ) {
                      this.personalconsumption[i].placeList[j].mealPlaceList[
                        z
                      ].id = 'ad2' + i.toString() + j.toString() + z.toString()
                    }
                    this.personalconsumption[i].placeList[
                      j
                    ].placeList = this.personalconsumption[i].placeList[
                      j
                    ].mealPlaceList
                  }
                }
              }
              this.personalconsumption.push(this.totalist)
              return
            }

            if (this.mealFlag == true && this.placeFlag == false) {
              this.personalconsumption.push(this.totalist)
              for (var i = 0; i < this.personalconsumption.length; i++) {
                this.personalconsumption[i].id = [i].toString()
                if (
                  this.personalconsumption[i].mealList != null &&
                  this.personalconsumption[i].mealList.length != 0
                ) {
                  for (
                    var j = 0;
                    j < this.personalconsumption[i].mealList.length;
                    j++
                  ) {
                    this.personalconsumption[i].mealList[j].id =
                      'j' + i.toString() + j.toString()
                  }
                }
              }
              return
            }
            if (this.mealFlag == false && this.placeFlag == true) {
              this.personalconsumption.push(this.totalist)
              for (var i = 0; i < this.personalconsumption.length; i++) {
                this.personalconsumption[i].id = [i].toString()
                if (
                  this.personalconsumption[i].placeList != null &&
                  this.personalconsumption[i].placeList.length != 0
                ) {
                  for (
                    var j = 0;
                    j < this.personalconsumption[i].placeList.length;
                    j++
                  ) {
                    this.personalconsumption[i].placeList[j].id =
                      'ae' + i.toString() + j.toString()
                  }
                }
              }
            }

            // if (this.mealFlag == true && this.placeFlag == false) {
            //   this.totalist.id = "all";
            //   // this.totalist.departmentName='汇总'
            //   this.totalist.placeList = this.totalist.mealList || [];
            //   for (var k = 0; k < this.totalist.placeList.length; k++) {
            //     this.totalist.placeList[k].id = "all" + k;
            //   }
            //   for (var i = 0; i < this.personalconsumption.length; i++) {
            //     this.personalconsumption[i].id = [i].toString();
            //     if (
            //       this.personalconsumption[i].placeList != null &&
            //       this.personalconsumption[i].placeList.length != 0
            //     ) {
            //       for (
            //         var j = 0;
            //         j < this.personalconsumption[i].placeList.length;
            //         j++
            //       ) {
            //         this.personalconsumption[i].placeList[j].id =
            //           i.toString() + j.toString();
            //         //  this.personalconsumption[i].placeList[j].mealName='全部'
            //         for (
            //           var z = 0;
            //           z <
            //           this.personalconsumption[i].placeList[j].mealPlaceList
            //             .length;
            //           z++
            //         ) {
            //           this.personalconsumption[i].placeList[j].mealPlaceList[
            //             z
            //           ].id = i.toString() + j.toString() + z.toString();
            //         }
            //         this.personalconsumption[i].placeList[
            //           j
            //         ].placeList = this.personalconsumption[i].placeList[
            //           j
            //         ].mealPlaceList;
            //       }
            //     }
            //   }
            //   // this.personalconsumption.push(this.totalist);
            // }
          } else {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //个人消费汇总统计
    consumeusertototal() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this.loading1 = true
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/consume/consume-data-user-gather-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading1 = false
            if (data.messageCode == 200) {
              _this.totalist = {
                ...data.messageContent,
                departmentName: '合计：',
                consumePlace: '',
                mealName: ''
              }
              // setTimeout(() => {
              //   _this.usergather();
              // }, 100);
              resolve(_this.totalist)
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
      })
    },
    // 查询
    async onSubmit() {
      this.pageNum = 1
      this.totalist = []
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      this.Flagtype = {}
      this.chiilderntype = {}
      if (this.departmentGuid != '' && this.departmentGuid != null) {
        this.searchInfo.departmentGuidList = this.departmentGuid
      }
      if (this.userName != '' && this.userName != null) {
        this.searchInfo.userName = this.userName
      }
      // if (this.daytime != null && this.daytime != '') {
      //   this.searchInfo.startDate = this.daytime[0]
      //   this.searchInfo.endDate = this.daytime[1]
      // }
      // if (this.time != null && this.time != '') {
      //   this.searchInfo.startTime = this.time[0]
      //   this.searchInfo.endTime = this.time[1]
      // }
      this.searchInfo.startTime = this.daytime[0] + ' ' + this.time[0]
      this.searchInfo.endTime = this.daytime[1] + ' ' + this.time[1]

      this.searchInfo.mealFlag = this.mealFlag
      if (this.searchInfo.mealFlag == true) {
        this.Flagcheck = false
        this.$nextTick(() => {
          this.Flagcheck = true
        })
        this.Flagtype = {
          children: 'mealList',
          hasChildren: 'hasChildren'
        }
      }
      this.searchInfo.placeFlag = this.placeFlag
      if (this.searchInfo.placeFlag == true) {
        this.Flagcheck = false
        this.$nextTick(() => {
          this.Flagcheck = true
        })
        this.Flagtype = {
          children: 'placeList',
          hasChildren: 'hasChildren'
        }
      }
      if (
        this.searchInfo.placeFlag == true &&
        this.searchInfo.mealFlag == true
      ) {
        this.Flagcheck = false
        this.$nextTick(() => {
          this.Flagcheck = true
        })
        this.Flagtype = {
          children: 'placeList',
          hasChildren: 'hasChildren'
        }
      }
      // console.log(this.searchInfo)
      this.totalist = await this.consumeusertototal()
      this.usergather()
    },
    // 导出或打印
    async onExport(type) {
      if (this.personalconsumption.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return
      }
      await this.outexecel()
      if (type == 'print') {
        this.printJS()
      } else {
        this.export2Excel()
      }
    },
    // 拿到表头数据
    getIsPrint() {
      const filterValArr = [
        'departmentName',
        'cardNumber',
        'userName',
        'consumePlace',
        'mealName',
        'sumSuccessExpenditure',
        'sumLoseExpenditure',
        'sumExpenditure',
        'consumeCount',
        'avgExpenditure',
        'maxExpenditure',
        'minExpenditure',
        'timesExpenditureCount'
      ]
      let valArr = []
      let tHeader = []
      filterValArr.map(item => {
        if (this.formThead[item].checked) {
          valArr.push(this.formThead[item].prop)
          tHeader.push(this.formThead[item].label)
        }
      })
      return { filterValArr: valArr, tHeader }
    },
    // 打印
    printJS() {
      let someJSONdata = this.exportlist
      const title = '个人消费汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      const properties = []
      // 拿到数据,filterValArr为数据值，tHeader为数据标题，一一对应
      const { filterValArr, tHeader } = this.getIsPrint()
      filterValArr.map((item, index) => {
        properties.push({
          displayName: tHeader[index],
          field: filterValArr[index]
        })
      })
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,

          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          sessionStorage.getItem('username'),
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 导出数据所有
    outexecel() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this.exportlist = []
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/consume/consume-data-user-gather'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageSize: _this.recordCount,
                pageNum: 1,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              // if (
              //   _this.searchInfo.mealFlag == false &&
              //   _this.searchInfo.placeFlag == false
              // ) {
              _this.exportlist = data.messageContent.data
              _this.exportlist.push({ ..._this.totalist })
              for (var i = 0; i < _this.exportlist.length; i++) {
                _this.exportlist[i].avgExpenditure = _this.amountyua(
                  _this.exportlist[i].avgExpenditure
                )
                _this.exportlist[i].maxExpenditure = _this.amountyua(
                  _this.exportlist[i].maxExpenditure
                )
                _this.exportlist[i].minExpenditure = _this.amountyua(
                  _this.exportlist[i].minExpenditure
                )
                _this.exportlist[i].sumExpenditure = _this.amountyua(
                  _this.exportlist[i].sumExpenditure
                )
                _this.exportlist[i].sumLoseExpenditure = _this.amountyua(
                  _this.exportlist[i].sumLoseExpenditure
                )
                _this.exportlist[i].sumSuccessExpenditure = _this.amountyua(
                  _this.exportlist[i].sumSuccessExpenditure
                )
              }
              console.log(_this.exportlist)
              resolve(_this.exportlist)
              // setTimeout(() => {
              //   _this.export2Excel();
              // }, 100);
              /**
              }
                if (
                  _this.searchInfo.mealFlag == true &&
                  _this.searchInfo.placeFlag == false
                ) {
                  let newARR = data.messageContent.data;
                  newARR.push(_this.exporttotal);
                  for (var i = 0; i < newARR.length; i++) {
                    _this.exportlist.push(newARR[i]);
                    if (
                      newARR[i].mealList.length != 0 &&
                      newARR[i].mealList != null
                    ) {
                      for (var j = 0; j < newARR[i].mealList.length; j++) {
                        _this.exportlist.push(newARR[i].mealList[j]);
                      }
                    }
                  }
                  for (var i = 0; i < _this.exportlist.length; i++) {
                    _this.exportlist[i].avgExpenditure = _this.amountyua(
                      _this.exportlist[i].avgExpenditure
                    );
                    _this.exportlist[i].maxExpenditure = _this.amountyua(
                      _this.exportlist[i].maxExpenditure
                    );
                    _this.exportlist[i].minExpenditure = _this.amountyua(
                      _this.exportlist[i].minExpenditure
                    );
                    _this.exportlist[i].sumExpenditure = _this.amountyua(
                      _this.exportlist[i].sumExpenditure
                    );
                    _this.exportlist[i].sumLoseExpenditure = _this.amountyua(
                      _this.exportlist[i].sumLoseExpenditure
                    );
                    _this.exportlist[i].sumSuccessExpenditure = _this.amountyua(
                      _this.exportlist[i].sumSuccessExpenditure
                    );
                  }
                  setTimeout(() => {
                    _this.export2Excel();
                  }, 100);
                  console.log(_this.exportlist);
                }
                if (
                  _this.searchInfo.placeFlag == true &&
                  _this.searchInfo.mealFlag == false
                ) {
                  let newARR = data.messageContent.data;
                  newARR.push(_this.exporttotal);
                  for (var i = 0; i < newARR.length; i++) {
                    _this.exportlist.push(newARR[i]);
                    if (
                      newARR[i].placeList != null &&
                      newARR[i].placeList.length != 0
                    ) {
                      for (var j = 0; j < newARR[i].placeList.length; j++) {
                        _this.exportlist.push(newARR[i].placeList[j]);
                      }
                    }
                  }
                  for (var i = 0; i < _this.exportlist.length; i++) {
                    _this.exportlist[i].avgExpenditure = _this.amountyua(
                      _this.exportlist[i].avgExpenditure
                    );
                    _this.exportlist[i].maxExpenditure = _this.amountyua(
                      _this.exportlist[i].maxExpenditure
                    );
                    _this.exportlist[i].minExpenditure = _this.amountyua(
                      _this.exportlist[i].minExpenditure
                    );
                    _this.exportlist[i].sumExpenditure = _this.amountyua(
                      _this.exportlist[i].sumExpenditure
                    );
                    _this.exportlist[i].sumLoseExpenditure = _this.amountyua(
                      _this.exportlist[i].sumLoseExpenditure
                    );
                    _this.exportlist[i].sumSuccessExpenditure = _this.amountyua(
                      _this.exportlist[i].sumSuccessExpenditure
                    );
                  }
                  setTimeout(() => {
                    _this.export2Excel();
                  }, 100);
                  console.log(_this.exportlist);
                }
                if (
                  _this.searchInfo.mealFlag == true &&
                  _this.searchInfo.placeFlag == true
                ) {
                  let newARR = data.messageContent.data;
                  // newARR.push(_this.exporttotal)
                  console.log(newARR);
                  for (var i = 0; i < newARR.length; i++) {
                    _this.exportlist.push(newARR[i]);
                    if (
                      newARR[i].placeList != null &&
                      newARR[i].placeList.length != 0
                    ) {
                      for (var j = 0; j < newARR[i].placeList.length; j++) {
                        _this.exportlist.push(newARR[i].placeList[j]);
                        if (
                          newARR[i].placeList[j].mealPlaceList.length != 0 &&
                          newARR[i].placeList[j].mealPlaceList != null
                        ) {
                          for (
                            var z = 0;
                            z < newARR[i].placeList[j].mealPlaceList.length;
                            z++
                          ) {
                            _this.exportlist.push(
                              newARR[i].placeList[j].mealPlaceList[j]
                            );
                          }
                        }
                      }
                    }
                  }
                  // _this.exportlist.push(_this.exporttotal)
                  // if(_this.exporttotal.mealList!=null && _this.exporttotal.mealList.length){
                  //     for(var i=0;i<_this.exporttotal.mealList.length;i++){
                  //       _this.exportlist.push(_this.exporttotal.mealList[i])
                  //     }
                  // }

                  for (var i = 0; i < _this.exportlist.length; i++) {
                    _this.exportlist[i].avgExpenditure = _this.amountyua(
                      _this.exportlist[i].avgExpenditure
                    );
                    _this.exportlist[i].maxExpenditure = _this.amountyua(
                      _this.exportlist[i].maxExpenditure
                    );
                    _this.exportlist[i].minExpenditure = _this.amountyua(
                      _this.exportlist[i].minExpenditure
                    );
                    _this.exportlist[i].sumExpenditure = _this.amountyua(
                      _this.exportlist[i].sumExpenditure
                    );
                    _this.exportlist[i].sumLoseExpenditure = _this.amountyua(
                      _this.exportlist[i].sumLoseExpenditure
                    );
                    _this.exportlist[i].sumSuccessExpenditure = _this.amountyua(
                      _this.exportlist[i].sumSuccessExpenditure
                    );
                  }
                  setTimeout(() => {
                    _this.export2Excel();
                  }, 100);
                  console.log(_this.exportlist);
                }
               */
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
      })
    },
    // 个人消费汇总打印
    export2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        // tHeaderarr.push('部门名称')

        const { tHeader, filterValArr } = this.getIsPrint()
        const filterVal = filterValArr
        const list = this.exportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename + nowtime
        })
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.usergather()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.usergather()
    },
    /**
     * 消费明细模块
     */
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs['detailslist'].doLayout()
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 查询
    async DetailsonSubmit() {
      this.pageNum2 = 1
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      if (this.departmentGuid != '' && this.departmentGuid != null) {
        this.searchInfo.departmentGuidList = this.departmentGuid
      }
      if (this.userName != '' && this.userName != null) {
        this.searchInfo.userName = this.userName
      }
      // if (this.daytime != null && this.daytime != '') {
      //   this.searchInfo.startDate = this.daytime[0]
      //   this.searchInfo.endDate = this.daytime[1]
      // }
      // if (this.time != null && this.time != '') {
      //   this.searchInfo.startTime = this.time[0]
      //   this.searchInfo.endTime = this.time[1]
      // }
      this.searchInfo.startTime = this.daytime[0] + ' ' + this.time[0]
      this.searchInfo.endTime = this.daytime[1] + ' ' + this.time[1]
      this.searchInfo.mealFlag = this.mealFlag
      this.searchInfo.placeFlag = this.placeFlag
      this.detailsTotal = null
      this.detailsTotal = await this.getDetailsonTotal()
      this.consumedetails()
    },
    // 获取个人消费明细合计
    getDetailsonTotal() {
      let _this = this
      _this.loading2 = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/consume/consume-details-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading2 = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              _this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 获取个人消费明细分页查询
    consumedetails() {
      this.loading2 = true
      this.searchInfo.unitGuid = this.changeschoolid
      this.$http({
        url: this.$http.adornUrl('/terminal/consume/consume-details-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading2 = false
        console.log(data)
        if (data.messageCode == 200) {
          if (
            data.messageContent.data.length == 0 ||
            data.messageContent.data == null
          ) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
          this.detailslist = data.messageContent.data
          this.recordCount2 = data.messageContent.recordCount
          this.currentPage2 = data.messageContent.pageNum
          if (this.detailslist.length != 0) {
            this.detailslist.push({ ...this.detailsTotal, newBalance: '' })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出或打印
    async DetailsonExport(type) {
      if (this.detailslist.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return
      }
      await this.Detailoutexecelinit()
      if (type == 'print') {
        this.printDetaileJS()
      } else {
        this.Detailexport2Excel()
      }
    },
    // 拿到表头数据
    getDetaileIsPrint() {
      const filterValArr = [
        'cardNumber',
        'userName',
        'departmentName',
        'dataMakeTime',
        'expenditure',
        'newBalance',
        'chargingType',
        'consumePlace',
        'terminalCode'
      ]
      let valArr = []
      let tHeader = []
      filterValArr.map(item => {
        if (this.formThead2[item].checked) {
          valArr.push(this.formThead2[item].prop)
          tHeader.push(this.formThead2[item].label)
        }
      })
      console.log(valArr, tHeader)

      return { filterValArr: valArr, tHeader }
    },
    // 打印
    printDetaileJS() {
      let someJSONdata = this.detailslistExportlist
      const title = '个人消费明细表'
      this.unitName = sessionStorage.getItem('unitName')
      const properties = []
      // 拿到数据,filterValArr为数据值，tHeader为数据标题，一一对应
      const { filterValArr, tHeader } = this.getDetaileIsPrint()
      filterValArr.map((item, index) => {
        properties.push({
          displayName: tHeader[index],
          field: filterValArr[index]
        })
      })
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          sessionStorage.getItem('username'),
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 获取导出、打印数据
    Detailoutexecelinit() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/terminal/consume/consume-details-page'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount2,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.detailslistExportlist = data.messageContent.data
              if (_this.detailslistExportlist != 0) {
                _this.detailslistExportlist.push({
                  ..._this.detailsTotal,
                  newBalance: ''
                })
              }
              for (var i = 0; i < _this.detailslistExportlist.length; i++) {
                _this.detailslistExportlist[i].expenditure = _this.amountyua(
                  _this.detailslistExportlist[i].expenditure
                )
                _this.detailslistExportlist[i].newBalance = _this.amountyua(
                  _this.detailslistExportlist[i].newBalance
                )
                _this.detailslistExportlist[
                  i
                ].chargingType = _this.filterchargingType(
                  _this.detailslistExportlist[i].chargingType
                )
              }
              console.log(_this.detailslistExportlist)
              // setTimeout(() => {
              //   _this.Detailexport2Excel();
              // }, 200);
              resolve(_this.detailslistExportlist)
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
      })
    },
    // 导出
    Detailexport2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        const { tHeader, filterValArr } = this.getDetaileIsPrint()
        console.log(tHeader, filterValArr)
        const filterVal = filterValArr
        const list = this.detailslistExportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename2 + nowtime
        })
      })
    },
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.consumedetails()
    },

    handleCurrentChangepage2(val) {
      this.pageNum2 = val
      this.consumedetails()
    }
  }
}
</script>

<style lang="scss" scoped>
.personal_consumption_smmary {
  padding: 10px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .tableone {
    .el-table__row .el-table__row--level-1 {
      .el-table th,
      .el-table tr {
        background-color: beige;
      }
    }
  }
  .el-table th {
    display: table-cell !important;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    /deep/.el-form-item__label {
      // padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 250px;
    }
  }
  .demo-form-inline1 {
    border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }
  .tabs_main {
    .page {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>